<script setup>
 import { getDetailHotService } from '@/api/detail.js'
 import { onMounted , ref ,computed} from 'vue'
 import { useRoute } from 'vue-router'

//  获取热榜数据逻辑
const route = useRoute()
const HotData = ref([])
const obj = ref({
    id: route.params.id,
    type: 1,
    limit: 3
})
 const getDetailHot = async() => {
 const res = await getDetailHotService(obj)
 HotData.value = res.data.result
 }
 onMounted(()=> {
    getDetailHot()
 })

//  定制热榜标题
const props = defineProps({
      title:{
        type: Number
      }
})
const propsObj = {
    1: "24小时热榜",
    2:"周热榜"
}

const final = computed(()=> propsObj[props.title])

</script>
<template>
   <!-- 商品详情页面包屑导航 -->
    <div class="detailHot" >
        <div class="titleHot">{{ final }}</div>
        <ul>
            <li v-for="item in HotData" :key="item.id">
                <router-link to="/">
                    <img :src="item.picture" alt="null" width="80%">
                    <p class="ellipsis">{{ item.name }}</p>
                    <span class="miaoshu">{{ item.desc }}</span>
                    <span class="price">{{ item.price }}元</span>
                </router-link>
         </li>
        </ul>
    </div>
</template>
<style scoped>
   .detailHot{
    width: 250px;
   }
    .titleHot{
        width: 100%;
        height: 40px;
        background-color: orangered;
        color: #fff;
        text-align: center;
        line-height: 40px;
    }
  .detailHot ul{
    width: 100%;
  }
  .detailHot ul li{
    margin-top: 10px;
    border: 1px solid #eee;
    width: 100%;
  }
    .detailHot ul li:nth-child(1){
        margin-top: 0;
    }
   .detailHot ul li a{
     display: grid;
     place-items: center; 
     width: 100%;
     height: 100%;
   }

  .price{
    color: red;
    font-weight: bolder;
  }
  .miaoshu{
    font-size: 12px;
    color: #999;
  }
  .ellipsis {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>